<template>
    <div class="choose_us_item">
        <div class="title_t">
            <p class="title_word"> {{ language == 'EN' ? 'Why choose us? ' : '为什么选择我们' }}</p>
            <p :class="language == 'EN' ? 'title_line en_w_breed' : 'title_line zn_w_breed'"> </p>
            <p class="title_line_next">
                <!-- {{ language == 'EN' ? 'About us' : '可靠的我' }} -->
            </p>
        </div>
        <div class="choose_us w">
            <div class="content_container">
                <div class="left">
                    <a href="ask_us">
                        <div class="quata"></div>
                    </a>
                </div>
                <div class="right">
                    <div class="centent">
                        <h2>{{ language == 'EN' ? 'Why choose us? ' : '为什么选择我们?' }}</h2>
                        <ul>
                            <li>{{ language == 'EN' ? 'Professional customer service' : '专业的客户服务' }}</li>
                            <li>{{ language == 'EN' ? 'Original and new parts' : '原装和新的零件' }}</li>
                            <li>{{ language == 'EN' ? '180 days warranty' : '180天保质期' }}</li>
                            <li>{{ language == 'EN' ? 'Quality control' : '质量把控' }}</li>
                            <li>{{ language == 'EN' ? 'Quick Quote' : '快速报价' }}</li>
                            <li>{{ language == 'EN' ? ' Control inventory' : '把控库存' }}</li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>
    </div>

</template>

<script>
// import { mapState } from "vuex";

export default {
    props: {
        language: {
            type: String,
            default: 'EN'
        }
    }
};
</script>

<style lang="scss" scoped>
.choose_us_item {
    .choose_us {
        height: 578px;
        // padding: 45px 0 45px 150px;
        background-color: #f2f2f2;
        box-sizing: border-box;
        background-image: url('../static/ic/choose@2x.jpg');
        background-size: 100%;
        text-align: center;
        position: relative;

        .content_container {
            position: absolute;
            left: 25%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #fff;
            opacity: 0.9;
            margin-top: 49px;
            padding: 30px 49px 30px 0;
            box-sizing: border-box;
            width: 100%;
            height: 479px;
            // border-radius: 20px;

            .left {
                height: 379px;
                width: 607px;
                margin: 50px 50px;
                background-image: url('../static/ic/choose@2x.jpg');
                background-repeat: no-repeat;
                background-size: cover;

                .quata {
                    background-image: url('../static/ic/choose@2x.jpg');
                }
            }

            .right {
                margin-left: 20px;
                height: 379px;
                width: 643px;

                .centent {
                    h2 {
                        font-family: Poppins;
                        font-weight: 700;
                        color: #171324;
                        font-size: 32px;
                        text-align: left;
                        margin-bottom: 40px;
                    }

                    ul li::before {
                        content: "\e601";
                        padding-right: 5px;
                        font-family: "iconfont";
                        color: rgba(47, 106, 255, 1);
                    }

                    ul li {
                        height:24px;
                        font-family: PingFang SC;
                        color: #666666;
                        font-size: 20px;
                        text-align: left;
                        margin: 20px 0;
                    }

                }
            }
        }
    }

    .head_title {
        text-align: center;
        background-color: #fff;

        h2 {
            color: #232323;
            font-size: 30px;
            height: 100px;
            line-height: 200px;
            letter-spacing: 5px;
            text-indent: 5px;
            font-family: "Gotham Bold";
            font-weight: 700;
        }

        p {
            font-size: 14px;
            height: 100px;
            display: block;
            line-height: 70px;
            color: #232323;
            letter-spacing: 5px;
            text-indent: 5px;
            font-family: "Gotham-Black";
        }
    }

    .title_t {
        // width: 460px;
        height: 200px;
        font-family: Poppins;
        font-weight: 700;
        font-size: 40px;
        text-align: center;
        // padding-top: 40px;
        box-sizing: border-box;
        margin: 0 auto;
        position: relative;
        background-color: #f6f6f6;

        .title_word {
            width: 100%;
            position: absolute;
            color: #171324;
            left: 0;
            top: 50px;
            z-index: 999;
            font-family: Poppins;
            font-weight: 700;
            color: #171324;
            font-size: 40px;
            text-align: center;

        }

        .title_line {
            position: absolute;

            height: 11px;
            background: #3f94f0;
            font-size: 18px;

            left: 50%;
            top: 90px;
            transform: translateX(-50%);
            border-radius: 2px;


        }

        .en_w_breed {
            width: 319px;
        }

        .zn_w_breed {
            width: 280px;
        }



        .title_line_next {
            position: absolute;
            width: 100%;
            height: 11px;
            top: 120px;
            font-family: Poppins;
            color: #666666;
            font-size: 18px;
            text-align: center;
            font-weight: 400;
        }

    }
}
</style>